<template>
  <div class="walletCount">
    <div class="walletCount-top clearfix">
      <div class="link-box">
        <router-link to="/wallet/walletlist" class="fl"><i class="iconfont">&#xe6c3;</i>{{$t('btn.back')}}</router-link>
      </div>
      <div class="bill-box" v-loading="loading">
        <div class="bill" v-for="(v,k) in list" :key="k">
          <p class="clearfix">
            <span class="fl name">{{v.name}}</span>
            <router-link to="/pools/payhistory" class="fr">{{$t('wallet.walletCount.bill')}}>></router-link>
          </p>
          <table class="table">
            <thead>
              <tr>
                <th>{{$t('wallet.address.type')}}</th>
                <th>{{$t('wallet.walletCount.available')}}</th>
                <th>{{$t('wallet.walletCount.all_income')}}</th>
                <th>{{$t('wallet.walletCount.all_accumulated')}}</th>
                <!-- <th v-if="language !== 'en'">{{$t('wallet.address.operation')}}</th> -->
              </tr>
            </thead>
            <tbody>
              <tr v-for="(v2,k2) in v.order_income" :key="k2">
                <td>{{v2.coin_type}}</td>
                <td>{{v2.income | d8fixed}}</td>
                <td>{{v2.all_income | d8fixed}}</td>
                <td>{{v2.all_accumulated | d8fixed}}</td>
                <!-- <td v-if="language !== 'en'">
                  <el-button size="mini" :class="{disabled:v2.is_get_order}" type="primary" @click="toDividend(v2)">{{$t('income.dividend')}}</el-button>
                </td> -->
              </tr>
            </tbody>
          </table>
        </div>
        <div class="tips-box">
          <p class="tips">{{$t('wallet.forward.reminder')}}</p>
          <p class="tips-con">
            <span>{{$t('wallet.forward.info')}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { walletSubDetail } from '@/api';
import pagination from '@/components/Pagination';
import { mapGetters } from 'vuex';

export default {
  components: { pagination },
  data() {
    return {
      list: [],
      loading: false,
    };
  },
  computed: {
    ...mapGetters(['id']),
  },
  created() {
    this.walletSubDetail();
  },
  methods: {
    // toDividend(v) {
    //   if (v.is_get_order === 1) {
    //     this.$message(`${this.$t('wallet.walletCount.take_in')} ${v.end_at} 23:00:00`);
    //   } else {
    //     this.$router.push('/dividend');
    //   }
    // },
    walletSubDetail() {
      this.loading = true;
      walletSubDetail({ parent_uid: this.id }).then((res) => {
        if (res.data.status) {
          this.list = res.data.data;
        } else {
          this.$message.error(this.$t(`api.${res.data.errcode}`));
        }
        this.loading = false;
      }).catch(() => {
        this.$message.error(this.$t('error.catchError'));
        this.loading = false;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.walletCount {
  .walletCount-top {
    padding-left: 20px;
    padding-bottom: 15px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border: solid 1px #e0e0e0;
    background-color: #ffffff;
    border-radius: 5px;
    .link-box {
      height: 33px;
      line-height: 33px;
      font-size: 12px;
      a{
        position: relative;
        color: #999999;
        i {
          position: absolute;
          top: 48%;
          transform: translateY(-50%);
          left: -18px;
          font-size: 18px;
          color: #999999;
        }
      }
    }
    .bill-box{
      min-height: 50px;
      .bill {
        padding: 0 50px 30px 30px;
        box-sizing: border-box;
        p {
          padding-bottom: 28px;
          .name{
            font-size: 18px;
            color: #333333;
          }
          a {
            color: #247ba0;
            font-size: 12px;
          }
        }
        .table{
          width: 100%;
          th,td{
            text-align: center;
            width: 22%;
            &:nth-of-type(1){
              width: 10%;
            }
            &:nth-of-type(5){
              width: 24%;
            }
          }
          th{
            background-color: #f2f2f2;
            color: #909399;
            font-size: 14px;
          }
          tbody{
            tr{
              transition: background-color ease-in-out .2s;
              &:nth-of-type(even){
                background-color: #fafafa;
              }
              &:hover{
                background-color: #f1f9f7;
              }
              td{
                color: #606266;
                font-size: 14px;
              }
            }
          }
        }
        button.disabled{
          background-color: #b8e0d9;
          border-color: #b8e0d9;
        }
      }
    }
  }
  .tips-box{
    padding-left: 30px;
    .tips {
      margin-top: 50px;
      font-size: 18px;
      color: #c33751;
      text-align: left;
    }
    .tips-con {
      text-align: left;
      span {
        position: relative;
        padding-left: 20px;
        font-size: 14px;
        color: #565656;
        a {
          font-style: normal;
          color: #70c1b3;
          cursor: pointer;
        }
        &::before {
          position: absolute;
          top: 50%;
          margin-top: -2px;
          left: 7px;
          content: " ";
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background-color: #eb547c;
        }
      }
    }
  }
}
</style>
